<template>
    <div>
        <div>导入导出</div>
        <input type="file"
            ref="fileInput"
            style="display: none"
            accept=".xlsx, .xls"
            @change="handleFileChange">
        <el-button type="primary" @click="handleImport">导入</el-button> 
        
        
        <el-button type="success" @click="exportTableToExcel">导出</el-button>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="日期" width="180" />
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="age" label="年龄" width="180" />
            <el-table-column prop="address" label="Address" />
        </el-table>
    </div>
</template>

<script  setup>
import * as XLSX from 'xlsx';
import { ref } from 'vue';
const tableData = ref([]);

const exportTableToExcel = () => {
    // 1、表头映射：将英文表头替换为中文
    const headers = {
        id: '日期',
        name: '姓名',
        age: '年龄',
        address: '地址'
    };
    // 2、将表格数据转换为工作表
    const worksheet = XLSX.utils.json_to_sheet(tableData.value);
    console.log(worksheet);
    
    // 3、获取工作表范围
    const range = XLSX.utils.decode_range(worksheet['!ref']);
    // 4、替换表头为中文
    for (let C = range.s.c; C <= range.e.c; ++C) {
        const address = XLSX.utils.encode_cell({ r: range.s.r, c: C }); // 获取表头单元格地址
        if (worksheet[address]) {
            const key = worksheet[address].v; // 获取原始表头内容
            worksheet[address].v = headers[key]; // 替换为中文表头
        }
    }
    // 5、创建一个新的 Excel 工作簿
    const workbook = XLSX.utils.book_new();
    // 6、将工作表添加到工作簿中，并命名为 'Sheet1'
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    // 7、将工作簿写入文件并触发下载，文件名为随机名称
    XLSX.writeFile(workbook, Math.random() + '.xlsx');
};



// 导出
const fileInput = ref(null);
// 触发文件选择
const handleImport = () => {
    fileInput.value.click();
};
// 处理文件选择
const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });

        // 获取第一个工作表
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];

        // 将工作表转换为 JSON 数据
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

        // 处理表头和数据
        const headers = jsonData[0]; // 第一行为表头
        const rows = jsonData.slice(1); // 剩余行为数据
        console.log(rows);
        
        // 将数据映射到 tableData
        tableData.value = rows.map((row) => {
            return {
                id: row[0],
                name: row[1],
                age: row[2],
                address: row[3]
            };
        });
        console.log(tableData.value );
    };
    reader.readAsArrayBuffer(file);
};
</script>